<!-- Page Title-->
<div class="page-title">
    <div class="container">
        <div class="column">
            <h1 class="text-white">{{language=='en'?'My Account':''}}{{language=='zh'?'用户中心':''}}</h1>
        </div>
        <div class="column">
            <ul class="breadcrumbs">
                <li><a routerLink="/" class="text-white">Home</a>
                </li>
                <li class="separator">&nbsp;- &nbsp;&nbsp;</li>
                <li><a routerLink="/account" class="text-white text-capitalize">{{firstStage}}</a>
                </li>
                <li class="separator">&nbsp;-&nbsp;&nbsp;</li>
                <li class="text-capitalize">{{secondStage}}</li>
            </ul>
        </div>
    </div>
</div>
<!-- Page Content-->
<div class="padding-bottom-3x mb-2">
    <div class="row" style="padding-top:20px;">
        <div class="col-lg-3 g-hidden-md-down">
            <div class="row">
                <div class="col-lg-2"></div>
                <div class="col-lg-9">
                    <aside class="user-info-wrapper" style="background-color: #2F2F43">
                        <div class="mt-30" style="margin-top: 8%; margin-left: 18%;">
                            <div class="" style="color: white">
                                <h4 style="color: white" i18n>BALANCE:</h4>
                                <p>
                                    <span>GTC</span>
                                    <span>: </span>
                                    <span *ngIf="user">
                                        {{user.account.balance | number:'1.2-3'}}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </aside>
                    <nav class="list-group">
                        <a class="list-group-item account-item" routerLink="/account/security">
                            <i class="icon-head"></i>{{language=='en'?'security center':''}}{{language=='zh'?'安全中心':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/authentication">
                            <i class="icon-head"></i>{{language=='en'?'verifiy':''}}{{language=='zh'?'实名认证':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/modify">
                            <i class="icon-head"></i>{{language=='en'?'change password':''}}{{language=='zh'?'修改密码':''}}
                        </a>
                        <!-- <a class="list-group-item account-item" routerLink="/account/voucher">
                            <i class="icon-head"></i>vouchers
                        </a> -->
                        <a class="list-group-item account-item" routerLink="/account/transfer">
                            <i class="icon-head"></i>{{language=='en'?'transfer':''}}{{language=='zh'?'转账':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/pay-password">
                            <i class="icon-head"></i>{{language=='en'?'pay password':''}}{{language=='zh'?'支付密码':''}}
                        </a>
                    </nav>
                </div>
            </div>
            
        </div>
        <div class="float-left-nav g-hidden-lg-up" [ngStyle]="{'left':leftNav?'-5px':''}">
            <div class="arrow" [ngClass]="{'arrowLeft':leftNav}" (click)="toggleLeft()">
                <div class="text-white arrowIcon arrowIcon-right">
                    <i class="hs-admin-angle-right"></i>
                </div>
                <div class="text-white arrowIcon arrowIcon-left">
                    <i class="hs-admin-angle-left"></i>
                </div>
            </div>
            <div class="row">
                <div class="col" style="padding:0">
                    <aside class="user-info-wrapper" style="background-color: #2F2F43">
                        <div class="mt-30" style="margin-top: 8%; margin-left: 18%;">
                            <div class="" style="color: white">
                                <h4 style="color: white" i18n>BALANCE:</h4>
                                <p>
                                    <span>GTC</span>
                                    <span>: </span>
                                    <span *ngIf="user">
                                        {{user.account.balance | number:'1.2-3'}}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </aside>
                    <nav class="list-group">
                        <a class="list-group-item account-item" routerLink="/account/security">
                            <i class="icon-head"></i>{{language=='en'?'security center':''}}{{language=='zh'?'安全中心':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/authentication">
                            <i class="icon-head"></i>{{language=='en'?'verifiy':''}}{{language=='zh'?'实名认证':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/modify">
                            <i class="icon-head"></i>{{language=='en'?'change password':''}}{{language=='zh'?'修改密码':''}}
                        </a>
                        <!-- <a class="list-group-item account-item" routerLink="/account/voucher">
                            <i class="icon-head"></i>vouchers
                        </a> -->
                        <a class="list-group-item account-item" routerLink="/account/transfer">
                            <i class="icon-head"></i>{{language=='en'?'transfer':''}}{{language=='zh'?'转账':''}}
                        </a>
                        <a class="list-group-item account-item" routerLink="/account/pay-password">
                            <i class="icon-head"></i>{{language=='en'?'pay password':''}}{{language=='zh'?'支付密码':''}}
                        </a>
                    </nav>
                </div>
            </div>
        </div>
        <div class="col-lg-8 center-container">
            <router-outlet></router-outlet>
                <!--<div class="col-md-3">-->
                <!--<account-balance></account-balance>-->
                <!--</div>-->
        </div>
    </div>
</div>
